<template>
    <div>
        <div v-if="projectItemData.type=='UPLOAD'">
            <div v-if="getItemValue['files']">
                <!-- 图片文件渲染图片栏 -->
                <template v-if="getItemValue['type'] == 'image'">
                    <span v-for="file in getItemValue['files']" :key="JSON.stringify(file)">
                        <el-image class="item-thumbnail-image-preview" :src="file.url" :preview-src-list="getItemValue['files'].map( img => img.url)" lazy />
                    </span>
                </template>

                <!-- 其他文件渲染文件下载链接 -->
                <template v-else>
                    <el-link
                        v-for="file in getItemValue['files']"

                        :key="file"
                        :href="file.url" target="_blank"
                        type="primary"
                    >
                        <span> {{ file.fileName }}</span>
                    </el-link>
                </template>
            </div>
            <span v-else>/</span>
        </div>
        <div v-else-if="projectItemData.type=='SIGN_PAD'">
            <el-image class="item-thumbnail-image-preview" :src="getItemValue || ''" :preview-src-list="[getItemValue || '']" lazy />
        </div>
        <div v-else>
            {{ getItemValue || '/' }}
        </div>
    </div>
</template>

<script>
export default {
    name: 'ResultItem',
    props: {
        projectItemData: {
            type: Object,
            default: function() {
                return {}
            }
        },
        resultData: {
            type: Object,
            default: function() {
                return {}
            }
        },
        fieldItemId: {
            type: String,
            default: 0
        }
    },
    computed: {
        processData() {
            console.log('数据', this.resultData)
            return this.resultData ? this.resultData['processData'] : {}
        },
        getItemValue() {
            if(this.processData[`field${this.fieldItemId}other`]){
              // 如果存在其他的内容，返回lable+内容
              return this.processData[`field${this.fieldItemId}`] + ':'+this.processData[`field${this.fieldItemId}other`]
            }
            return this.processData[`field${this.fieldItemId}`] ? this.processData[`field${this.fieldItemId}`] : ''
        }
    }

}
</script>

<style scoped>
.item-thumbnail-image-preview {
  width: 106px;
  height: 106px;
  margin-right: 15px;
  margin-bottom: 15px;
  border: 1px solid #EBEEF5;
  background: #0001;
}

</style>
